import { useNavigate } from 'react-router-dom';
import styles from './index.module.css';
import Nabar from '../../conpoment/Nabar';

function Index() {
  const navigate = useNavigate();

  const handleAgree = () => {
    // 用户同意须知后的处理逻辑
    console.log('用户已阅读并同意须知');
    // 跳转到预约表单页面，并传递当前路由信息
    navigate('/appointment_from', { 
      state: { from: '/appointment' } 
    });
  };

  return (
    <div className={styles.container}>
      {/* 顶部导航栏 */}
        <Nabar title='预约须知' sticky={false}></Nabar>
      {/* 内容区域 */}
      <div className={styles.content}>
        <div className={styles.instructions}>
          <div className={styles.section}>
            <h2>一、微信服务号可预约范围：</h2>
            <p>普通门诊、专病门诊、专家门诊、特需门诊以及膏方门诊。</p>
            <p>普通门诊、专病门诊预约患者享有优先就诊权。</p>
            <p>专家门诊、特需门诊按预约签到顺序就诊。</p>
          </div>

          <div className={styles.section}>
            <h2>二、严格实行实名制：</h2>
            <p>请填写真实有效的患者信息，包括姓名、身份证、社保卡等有效证件号、手机号等。</p>
            <p>请务必填写有效手机号码，以便接收预约成功、停诊等医院通知。</p>
          </div>

          <div className={styles.section}>
            <h2>三、预约时间：</h2>
            <p>就诊前15天至就诊日前1天(含双休日),23:00点以前。</p>
            <p>服务号每天6:00点开放预约。</p>
          </div>

          <div className={styles.section}>
            <h2>四、预约所需资料：</h2>
            
            <div className={styles.subsection}>
              <h3>1、本人实名制建档登记</h3>
              <div className={styles.subItem}>
                <p><strong>①上海医保患者：</strong></p>
                <p>可通过添加本人实名制医保卡，激活电子医保凭证，快速完成建档。</p>
              </div>
              <div className={styles.subItem}>
                <p><strong>②自费患者：</strong></p>
                <p>可在服务号"我的"-"就诊人管理"中添加就诊人，填写有效信息(姓名、身份证号、手机号)，通过身份证验证完成建档。</p>
              </div>
              <div className={styles.subItem}>
                <p><strong>③异地医保、离休医保、干保、工伤、儿保等特殊类型人员：</strong></p>
                <p>需先以自费卡类型建档，就诊当日携带相关医保卡、身份证等有效证件到医院人工窗口确认。</p>
              </div>
            </div>

            <div className={styles.subsection}>
              <h3>2、绑定就诊卡</h3>
              <p>实名制建档后，可在"我的"-"就诊人管理"中绑定对应的就诊卡类型(如社保卡、自费卡等)进行预约。</p>
            </div>

            <div className={styles.subsection}>
              <h3>3、每个微信号可绑定多张(最多6张)就诊卡</h3>
              <p>便于为他人(非首诊)预约。</p>
            </div>

            <div className={styles.subsection}>
              <h3>4、请在预约前务必确认本次预约的就诊卡信息</h3>
            </div>
          </div>
        </div>
      </div>

      {/* 底部确认按钮 */}
      <div className={styles.bottomButton}>
        <button className={styles.agreeButton} onClick={handleAgree}>
          我已阅读并同意须知
        </button>
      </div>
    </div>
  )
}

export default Index
